<template>
  <view>
    <view
      class="header"
      :style="{
        'padding-top': `${statusBarHeight}px;`,
        'background-color': realBackgroundColor,
        color: realTextColor,
      }"
    >
      <view class="header-content">
        <!-- <image
          v-if="isBack"
          @click="back"
          :src="require('./back-btn.png')"
          mode="widthFix"
          class="back-btn"
        /> -->
        <div class="back-btn" v-if="isBack" @click="back">
          <u-icon name="arrow-left" color="#333333" size="24"></u-icon>
        </div>
        <!-- 图标库使用方式 （可以根据color来切换） -->
        <!-- <dbb-icon style="" type="iconbianzubeifen" size="32" :color="realTextColor" /> -->
        <slot v-if="!title"></slot>
        <text v-else class="nav-text">{{ title }}</text>
      </view>
    </view>

    <view
      v-if="isOccupy"
      :style="{
        height: `calc(${statusBarHeight}px + 88rpx)`,
      }"
    ></view>
  </view>
</template>

<script>
// 使用自定义导航栏需要将页面 style 中增加 "navigationStyle": "custom"
// 参考示例项目
export default {
  props: {
    // 背景色
    backgroundColor: {
      type: String,
      default: "#ffffff",
    },
    // 页面传递过来距离顶部的高度
    scrollTop: {
      type: Number,
      default: 0,
    },
    // 默认字体颜色
    defaultTextColor: {
      type: String,
      default: "#000000",
    },
    // 是否透明
    transparent: {
      type: Boolean,
      default: false,
    },
    // 透明时文本颜色
    transparentTextColor: {
      type: String,
      default: "#ffffff",
    },
    // 透明阈值到指定高度取消透明
    transparentMaxHeight: {
      type: Number,
      default: 88,
    },
    // 是否留出导航栏高度
    isOccupy: {
      type: Boolean,
      default: true,
    },
    //  导航标题
    title: {
      type: String,
      default: "",
    },
    // 是否需要返回按钮
    isBack: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
      isTransparent: true,
    };
  },
  computed: {
    realBackgroundColor() {
      if (this.transparent) {
        let { r, g, b } = this.backgrounRGBObject;
        return `rgba(${r},${g},${b},${this.transparentAlpha})`;
      }
      return this.backgroundColor;
    },
    realTextColor() {
      if (this.transparent && this.transparentAlpha != 1) {
        return this.transparentTextColor;
      }
      return this.defaultTextColor;
    },
    transparentAlpha() {
      let alpha = Math.min(this.scrollTop / this.transparentMaxHeight, 1);
      if (alpha == 1 && this.isTransparent) {
        this.isTransparent = false;
        this.$emit("changeTransparent", false);
      } else if (alpha < 1 && !this.isTransparent) {
        this.isTransparent = true;
        this.$emit("changeTransparent", true);
      }
      return alpha;
    },
    backgrounRGBObject() {
      return this.Hex2RgbObject(this.backgroundColor);
    },
  },
  methods: {
    back() {
      let pages = getCurrentPages(); //获取当前页面信息栈
      let prevPage = pages[pages.length - 2]; //获取上一个页面信息栈

      try {
        if (prevPage) {
          uni.navigateBack({
            delta: 1,
          });
        } else {
          uni.switchTab({
            url: "/pages/home/index",
          });
        }
      } catch (err) {
        uni.switchTab({
          url: "/pages/home/index",
        });
      }
    },
    Hex2Dec(hex) {
      return parseInt(hex, 16).toString();
    },
    Hex2RgbObject(hex) {
      hex = hex.substring(1);
      if (hex.length === 3) {
        hex += hex;
      }
      return {
        r: this.Hex2Dec(hex.substring(0, 2)),
        g: this.Hex2Dec(hex.substring(2, 4)),
        b: this.Hex2Dec(hex.substring(4)),
      };
    },
  },
};
</script>

<style style lang="scss">
.header {
  position: fixed;
  top: 0;
  left: 0;
  height: 88rpx;
  width: 100%;
  display: flex;
  align-items: center;
  box-sizing: content-box;
  z-index: 999;
  transition: background-color, color 0.1s linear;
}

.header-content {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 30rpx;
}

.nav-text {
  font-size: 34rpx;
  margin-left: 20rpx;
}

.back-btn {
  position: absolute;
  left: 0;
  left: 30rpx;
  width: 20rpx;
}
</style>
